<template>
  <div id="HasPayOrder">
    <main-header :title="'统计报表 - 已付款订单'" :crumbsArr="crumbsArr" />
    <div class="main" ref="main">
      <div style="padding: 20px; background: #fff;">
        <div class="deal_block">
          <el-date-picker
            v-model="timeCondition"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary" style="margin-left: 10px;" @click="loadData">查 询</el-button>
          <el-button type="warning" :disabled="!hasTableData" @click="exportExcel">导 出</el-button>
        </div>
        <div class="report_table" v-loading="dataLoading">
          <el-table
            border
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="createdate"
              label="创建时间">
            </el-table-column>
            <el-table-column
              prop="orderno"
              label="订单编号">
            </el-table-column>
            <el-table-column
              prop="nickname"
              label="下单人">
            </el-table-column>
            <el-table-column
              prop="telephone"
              label="手机号">
            </el-table-column>
            <el-table-column
              prop="ordername"
              label="订单名称">
            </el-table-column>
            <el-table-column
              prop="saleOrderDetailList[0].totalPrice"
              label="总金额">
            </el-table-column>
            <el-table-column
              prop="saleOrderDetailList[0].totalCredit"
              label="总积分">
            </el-table-column>
            <el-table-column
              label="订单类型">
              <template slot-scope="scope">
                {{scope.row.saleItemType | handleSaleItemType}}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :page-count="pageInfo.pageCount"
            :page-size="pageInfo.pageSize"
            :current-page="pageInfo.currentPage"
            @current-change="loadTableData($event)">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
import MainHeader from '@/components/layouts/MainHeader'

export default {
  name: 'HasPayOrder',
  components: { MainHeader },
  beforeRouteEnter (to, from, next) {
    next(vm => vm.init())
  },
  data () {
    const endTime = new Date()
    const startTime = endTime.getTime() - 3600 * 1000 * 24

    return {
      crumbsArr: [ // 面包屑
        { name: 'welcome', txt: '首页' }, { txt: '统计报表 - 已付款订单' }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      timeCondition: [startTime, endTime],
      tableData: null,
      hasTableData: false,
      pageInfo: { // 页面分页信息
        pageCount: 1,
        pageSize: 0,
        currentPage: 1
      },
      dataLoading: false
    }
  },
  filters: {
    handleSaleItemType (value) {
      switch (value) {
        case 0:
          return '商品'
        case 1:
          return '服务'
        case 2:
          return '礼品'
        case 3:
          return '兑换券'
      }
    }
  },
  methods: {
    init () { // 初始化
      this.loadData()
    },
    async loadData (page = this.pageInfo.currentPage) { // 加载数据
      this.dataLoading = true
      const params = {}
      if (this.timeCondition) {
        params.startTime = moment(this.timeCondition[0]).format('YYYY-MM-DD HH:mm:ss')
        params.endTime = moment(this.timeCondition[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      const response = await API.querySpendOrderReport(params)
      this.dataLoading = false
      const { code, data } = response
      if (code === 1) {
        this.tableData = data.rows
        if (data.rows.length === 0) {
          this.hasTableData = false
        } else {
          this.hasTableData = true
        }
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    },
    async exportExcel () {
      const params = {}
      if (this.timeCondition) {
        params.startTime = moment(this.timeCondition[0]).format('YYYY-MM-DD HH:mm:ss')
        params.endTime = moment(this.timeCondition[1]).format('YYYY-MM-DD HH:mm:ss')
      }

      const excelData = await API.exportExcel(params)
      const reader = new FileReader()
      reader.readAsDataURL(excelData)
      reader.onload = (e) => {
        const a = document.createElement('a')
        a.download = `已付款订单报表${moment().format('YYYYMMDDHHmmss')}.xls`
        a.href = e.target.result
        this.$refs.main.appendChild(a)
        a.click()
        this.$refs.main.removeChild(a)
      }
      console.log(excelData)
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  padding: 20px 20px 0;
  .deal_block {
    text-align: right;
  }
  .report_table {
    margin-top: 20px;
  }

  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
